import { registerMarkupTests } from "./helper";

registerMarkupTests(
  [
    {
      name: "Test Survey navigation custom buttons",
      json: {
        questions: [
          {
            "type": "html",
            "name": "q1",
            "html": "<div></div>"
          }
        ]
      },
      event: "onAfterRenderSurvey",
      initSurvey: (survey) => {
        survey.navigationBar.setItems([]);
        survey.addNavigationItem({
          id: "custom-action",
          title: "Custom Action",
          tooltip: "Custom Tooltip"
        });
      },
      getElement: (el) => {
        return <HTMLElement>el?.querySelector("form");
      },
      snapshot: "survey-navigation"
    }, {
      name: "Test Survey theme css variables",
      json: {
        questions: [
          {
            "type": "html",
            "name": "q1",
            "html": "<div></div>"
          }
        ]
      },
      event: "onAfterRenderSurvey",
      initSurvey: (survey) => {
        survey.applyTheme({ cssVariables: { "--sjs-test": "val" } });
      },
      getSnapshot: el => {
        el.innerHTML = "";
        el.removeAttribute("data-bind");
        return el.outerHTML;
      },
      snapshot: "survey-theme-variables"
    }, {
      name: "Test Survey backgroundImage",
      json: {
        backgroundImage: "",
        backgroundImageFit: "cover",
        backgroundImageAttachment: "fixed",
        backgroundOpacity: 0.4,
        questions: [
          {
            "type": "html",
            "name": "q1",
            "html": "<div></div>"
          }
        ]
      },
      event: "onAfterRenderSurvey",
      initSurvey(survey) {
        survey["needRenderIcons"] = false;
      },
      getSnapshot: el => {
        return el.children[0].children[0].outerHTML;
      },
      snapshot: "survey-theme-backgroundImage"
    },
    {
      name: "Test survey logo (attribute sizes)",
      json: {
        "logo": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg",
        "logoPosition": "right",
        "logoWidth": "200px",
        "logoHeight": "300px",
        "title": "Test",
        "pages": [
          {
            "name": "page1",
            "elements": [
              {
                "type": "text",
                "name": "question1"
              }
            ]
          }
        ]
      },
      event: "onAfterRenderHeader",
      snapshot: "survey-logo-attribute-sizes",
      getElement: (el) => {
        return <HTMLElement>el?.querySelector(".sv_logo");
      }
    },
    {
      name: "Test survey logo (style sizes)",
      json: {
        "logo": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg",
        "logoPosition": "right",
        "logoWidth": "30%",
        "logoHeight": "auto",
        "title": "Test",
        "pages": [
          {
            "name": "page1",
            "elements": [
              {
                "type": "text",
                "name": "question1"
              }
            ]
          }
        ]
      },
      event: "onAfterRenderHeader",
      snapshot: "survey-logo-style-sizes",
      getElement: (el) => {
        return <HTMLElement>el?.querySelector(".sv_logo");
      }
    },
    {
      name: "Test survey description",
      json: {
        "title": "Test",
        "description": "Description",
        "pages": [
          {
            "name": "page1",
            "elements": [
              {
                "type": "text",
                "name": "question1"
              }
            ]
          }
        ]
      },
      event: "onAfterRenderHeader",
      snapshot: "survey-header"
    },
    {
      name: "Test survey description - header advanced mode",
      json: {
        "title": "Test",
        "description": "Description",
        "pages": [
          {
            "name": "page1",
            "elements": [
              {
                "type": "text",
                "name": "question1"
              }
            ]
          }
        ],
        "headerView": "advanced"
      },
      event: "onAfterRenderSurvey",
      getElement: el => {
        return <HTMLElement>el?.querySelector(".sv-header__cell.sv-header__cell--middle.sv-header__cell--right") as HTMLElement;
      },
      snapshot: "survey-header-advanced"
    },
    {
      name: "Test survey description - header advanced mode mobile",
      json: {
        "title": "Test",
        "description": "Description",
        "pages": [
          {
            "name": "page1",
            "elements": [
              {
                "type": "text",
                "name": "question1"
              }
            ]
          }
        ],
        "headerView": "advanced"
      },
      event: "onAfterRenderSurvey",
      initSurvey: survey => survey.setIsMobile(true),
      getElement: el => {
        return <HTMLElement>el?.querySelector(".sv-header--mobile");
      },
      snapshot: "survey-header-advanced-mobile"
    }
  ]);